<template>
  <div class="home-show-container">
    <!-- 顶部导航（固定不滚动） -->
    <HeaderNav class="fixed-header" />

    <!-- 分屏显示区域 -->
    <div class="split-screen-container" ref="container">
      <!-- 轮播图 -->
      <div :class="['screen-section', 'banner-section']" :style="getSectionStyle(0)" ref="section0">
        <el-carousel :interval="4000" arrow="always" height="calc(100vh - 120px)" indicator-position="outside" :pause-on-hover="false">
          <el-carousel-item v-for="item in bannerList" :key="item">
            <div class="carousel-content">
              <img :src="item.imgUrl" :alt="item.title" class="banner-imgs" @click="jump(item)" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 杰出成果展示 -->
      <div :class="['screen-section', 'achievement-section']" :style="getSectionStyle(1)" ref="section1">
        <OutstandingAchievement />
      </div>

      <!-- 实践活动 -->
      <div :class="['screen-section', 'activity-section']" :style="getSectionStyle(2)" ref="section2">
        <!-- 主要内容区域 -->
        <div class="content-wrapper">
          <PracticalActivity />
        </div>
        <!-- 固定在底部的页脚 -->
        <Footer class="combined-footer" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import HeaderNav from "./components/headerNav.vue";
import OutstandingAchievement from "./components/outstandingAchievement.vue";
import PracticalActivity from "./components/practicalActivity.vue";
import { getBannerList } from "@/api/system/banner";
import Footer from "./components/Footer.vue";

const router = useRouter();
const bannerList = ref([]);
const isTransitioning = ref(false);
const container = ref(null);
const section0 = ref(null);
const section1 = ref(null);
const section2 = ref(null);
const scrollProgress = ref(0); // 滚动进度 0-1

function getBannerAll() {
  getBannerList({ imgType: 32 }).then((res) => {
    if (res.code === 200) {
      console.log("bannerList:", res.data.records);
      bannerList.value = res.data.records;
    }
  });
}

let handleResize = () => {
  heightimg.value =
    document.getElementsByClassName("banner-imgs")[0].offsetHeight + "px";
};

function jump(item) {
  // router.push({ path:item.link });
  window.open(item.link, "_blank");
}
// function jump(item) {
//   if (item.link) {
//     // 获取当前域名
//     const currentDomain = window.location.origin;
//     // 确保 link 以 / 开头
//     const path = item.link.startsWith('/') ? item.link : `/${item.link}`;
//     // 在新窗口打开完整 URL
//     window.open(`${currentDomain}${path}`, '_blank');
//   }
// }

getBannerAll();

// 添加滚轮事件处理
let isScrolling = false;
const currentSection = ref(0);
const sections = ref([]);
const targetScrollProgress = ref(0); // 目标滚动进度
const animationFrame = ref(null);

// 计算每个部分的样式
function getSectionStyle(index) {
  // 判断当前部分的状态
  const isCurrent = index === currentSection.value;
  const isNext = index === currentSection.value + 1;
  const isPrev = index === currentSection.value - 1;

  // 默认样式（非活跃状态）
  let scale = 1;
  let opacity = 1;
  let translateY = '0';
  let blur = '0px';

  // 处理过渡动画
  if (isTransitioning.value) {
    const progress = scrollProgress.value - Math.floor(scrollProgress.value);
    const targetSection = Math.floor(scrollProgress.value + 0.5); // 四舍五入确定目标部分

    // 当前部分正在被切走
    if (isCurrent && targetSection !== currentSection.value) {
      if (targetSection > currentSection.value) {
        // 向下滚动 - 当前页面向上移动并淡出
        scale = 1 - progress * 0.1;
        opacity = 1 - progress * 0.5;
        translateY = `-${progress * 50}px`;
        blur = `${progress * 5}px`;
      } else {
        // 向上滚动 - 当前页面向下移动并淡出
        scale = 1 - progress * 0.1;
        opacity = 1 - progress * 0.5;
        translateY = `${progress * 50}px`;
        blur = `${progress * 5}px`;
      }
    }

    // 新部分正在切入
    if (index === targetSection && targetSection !== currentSection.value) {
      if (targetSection > currentSection.value) {
        // 从下方进入
        scale = 0.95 + progress * 0.05;
        opacity = 0.5 + progress * 0.5;
        translateY = `${(1 - progress) * 50}px`;
        blur = `${(1 - progress) * 5}px`;
      } else {
        // 从上方进入
        scale = 0.95 + progress * 0.05;
        opacity = 0.5 + progress * 0.5;
        translateY = `-${(1 - progress) * 50}px`;
        blur = `${(1 - progress) * 5}px`;
      }
    }
  }

  return {
    transform: `scale(${scale}) translateY(${translateY})`,
    opacity: opacity,
    filter: `blur(${blur})`,
    transition: isTransitioning.value
      ? "transform 0.8s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1), filter 0.8s cubic-bezier(0.33, 1, 0.68, 1)"
      : "none",
  };
}

// 平滑动画函数
function animateScroll() {
  // 平滑过渡到目标进度
  const diff = targetScrollProgress.value - scrollProgress.value;
  if (Math.abs(diff) < 0.001) {
    scrollProgress.value = targetScrollProgress.value;
    isTransitioning.value = false;
    isScrolling = false;
    cancelAnimationFrame(animationFrame.value);
    return;
  }

  // 使用缓动函数使动画更自然
  scrollProgress.value += diff * 0.08;
  animationFrame.value = requestAnimationFrame(animateScroll);
}

onMounted(() => {
  // 获取所有分屏部分
  sections.value = [section0.value, section1.value, section2.value];

  // 添加滚轮事件监听
  window.addEventListener("wheel", handleWheel, { passive: false });
});

// 添加 onUnmounted 钩子来清除事件监听器
onUnmounted(() => {
  // 移除滚轮事件监听器
  window.removeEventListener("wheel", handleWheel);

  // 如果有动画帧在运行，取消它
  if (animationFrame.value) {
    cancelAnimationFrame(animationFrame.value);
  }
});


function handleWheel(event) {
  // 阻止默认滚动行为
  event.preventDefault();

  if (isScrolling) return;

  // 提高滚动灵敏度，不再限制最大变化值
  const wheelDirection = Math.sign(event.deltaY);

  isScrolling = true;
  isTransitioning.value = true;

  // 判断滚动方向
  let nextSection = currentSection.value;
  if (wheelDirection > 0) {
    // 向下滚动，前往下一屏
    if (currentSection.value < sections.value.length - 1) {
      nextSection++;
    }
  } else if (wheelDirection < 0) {
    // 向上滚动，前往上一屏
    if (currentSection.value > 0) {
      nextSection--;
    }
  }

  // 如果有变化才执行动画
  if (nextSection !== currentSection.value) {
    // 设置目标进度并开始动画
    currentSection.value = nextSection;
    targetScrollProgress.value = nextSection;
    animateScroll();

    // 滚动到目标部分
    sections.value[currentSection.value].scrollIntoView({
      behavior: "smooth",
    });
  } else {
    // 恢复原位
    targetScrollProgress.value = currentSection.value;
    animateScroll();
  }
}

</script>

<style scoped>
.home-show-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url("@/assets/home/bg-show.png");
  background-attachment: fixed;
  /* 背景图片固定不滚动 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow-y: hidden;
}

/* 固定头部导航 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}


.split-screen-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  scroll-snap-type: y mandatory;
  height: 100vh;
  scroll-padding-top: 120px;
  scroll-behavior: smooth;
  perspective: 1000px;
  overflow-x: hidden;
  overflow-y: auto; /* 修改：从hidden改为auto，允许垂直滚动 */
}

.screen-section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 改为从顶部开始布局 */
  align-items: center;
  padding-top: 120px;
  /* 增加顶部内边距，确保内容不被导航栏遮挡 */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  will-change: transform;
  /* 仅保留变换属性 */
  transform-origin: center top;
  /* 设置变换原点在顶部中心 */
}

/* 轮播图部分样式 */
.banner-section {
  width: 100%;
  height: calc(100vh - 80px);
  /* 减少头部导航栏高度补偿 */
  overflow: hidden;
  max-width: 100vw;
  position: relative;
  /* 新增定位上下文 */
  padding-top: 120px;
  /* 确保与其他部分一致 */
}

.carousel-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.banner-imgs {
  /* width: 100%;
  height: 100%;
  object-fit: cover;*/
  /* 保持图片完整显示 */
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  /* 精确居中 */
  /*min-width: 100%;
  min-height: 100%; */
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent
}

/* 确保轮播图容器有正确的宽度并且背景透明 */
:deep(.el-carousel) {
  width: 100%;
  background: transparent;
}

:deep(.el-carousel__container) {
  width: 100%;
  background: transparent;
}

:deep(.el-carousel__item) {
  width: 100% !important;
  background: transparent;
}

.achievement-section {
  background-color: rgba(255, 255, 255, 0.1);
  padding-top: 10px;
  /* 增加顶部内边距，确保内容完全显示 */
  padding-bottom: 20px;
}

.activity-section {
  position: relative;
  height: 100vh;
  /* 修改为固定高度 */
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  /* 增加顶部内边距，确保内容完全显示 */
}



.combined-footer {
  flex-shrink: 0;
  width: 100%;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: rgba(230, 230, 239, 0.5);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px);
  /* Safari兼容 */
  /* border-top: 1px solid rgba(230, 230, 239, 0.5); 可选：添加一个微妙的边框 */
  height: 120px;
}

html {
  scroll-behavior: auto;
  /* 移除平滑滚动效果 */
}

@media (min-height: 769px) {
  .split-screen-container {

    scroll-padding-top: 110px;

  }

}



@media (max-height: 768px) {

  .split-screen-container {
    scroll-padding-top: 90px;
  }

  .screen-section {
    padding-top: 100px;
  }

  .achievement-section {
    background-color: rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    /* 增加顶部内边距，确保内容完全显示 */
    padding-bottom: 20px;
  }

  .activity-section {
    position: relative;
    height: 100vh;
    /* 修改为固定高度 */
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    /* 增加顶部内边距，确保内容完全显示 */
  }

  .section-title {
    margin: 0px auto 12px auto;

  }

  .combined-footer {
    height: 90px;
    /* 在小屏幕上减小页脚高度 */
  }

  /* 添加对页脚内部元素的样式调整 */
  :deep(.combined-footer .footer-content) {
    font-size: 12px;
    /* 减小字体大小 */
    line-height: 1.3;
    /* 减小行高 */
  }

  :deep(.combined-footer .footer-links) {
    margin-bottom: 4px;
    /* 减小底部外边距 */
  }

  :deep(.combined-footer .footer-copyright) {
    font-size: 11px;
    /* 版权信息字体更小 */
    line-height: 1.2;
    /* 更紧凑的行高 */
  }

}
</style>